<template>
  <el-dialog
    v-model="props.accountDialog"
    title="更换账号"
    width="30%"
    :show-close="false"
  >
    <div class="tips" style="">当前账号：{{ props.userAccount }}</div>
    <el-form :model="ruleForm" :rules="rules" ref="accountFormRef">
      <el-form-item label="新手机号" prop="userAccount">
        <el-input
          v-model="ruleForm.userAccount"
          placeholder="请输入新手机号"
          maxlength="11"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="验证码" prop="smsCode" class="login-animation2">
        <el-input
          v-model="ruleForm.smsCode"
          placeholder="请输入验证码"
          style="width: 75%"
        />
        <el-button
          type="primary"
          style="width: 25%"
          @click="getCode"
          :disabled="!getCodeFlag"
          >{{
            getCodeFlag ? '获取验证码' : '已发送(' + codeNum + ')'
          }}</el-button
        >
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="quxiao(accountFormRef)">取消</el-button>
        <el-button
          type="primary"
          @click="queren(accountFormRef)"
          :loadding="loadding"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, ElTree, FormInstance, FormRules } from 'element-plus'
import { ref, reactive, watch } from 'vue'
import { sendSmsCode } from '/@/api/login'
import { updateUserAccountApi } from '/@/api/user'
const props = defineProps({
  accountDialog: Boolean,
  userAccount: String,
  userId: String
})
const emit = defineEmits(['quxiao', 'submitAccount'])
const accountFormRef = ref<FormInstance>()
const loadding = ref(false)
const codeNum = ref(60)
const getCodeFlag = ref(true)
const ruleForm = ref({
  userAccount: '',
  smsCode: ''
})
const rules = reactive<FormRules>({
  userAccount: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
  smsCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
})

const timer = ref<any>(null)
const getCode = async () => {
  let res = await sendSmsCode({ userAccount: ruleForm.value.userAccount })
  if (res.code == 0) {
    ElMessage.success('已发送')
    getCodeFlag.value = false
    timer.value = setInterval(() => {
      if (codeNum.value > 0) {
        codeNum.value--
      } else {
        getCodeFlag.value = true
        codeNum.value = 60
        clearInterval(timer.value)
      }
    }, 1000)
  }
}

const quxiao = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit('quxiao')
}
const queren = async (formEl: FormInstance | undefined) => {
  loadding.value = true
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      Reflect.set(ruleForm.value, 'userId', props.userId)
      updateUserAccountApi(ruleForm.value).then((res) => {
        if (res.code == 0) {
          ElMessage.success('更改成功')
          loadding.value = false
          emit('submitAccount')
        } else {
          loadding.value = false
        }
      })
    } else {
      loadding.value = false
    }
  })
}
</script>
<style scoped lang="scss">
.tips {
  text-align: left;
  margin-bottom: 15px;
  margin-left: 4px;
  font-size: var(--el-font-size-base);
}
</style>
